<template>
	<!--提示-->
	<view v-if="isShow">
		<view class="prompt">
			<view class="prompt_title">{{ data.title }}</view>
			<view class="prompt_content">{{ data.content }}</view>
			<view class="prompt_btn" @click="confirm">{{ data.button }}</view>
		</view>
		<view class="prompt_cover"></view>
	</view>
</template>

<script>
export default {
	name: 'prompt',
	props: {
		content: {
			type: Object
		},
		show: {
			type: Boolean,
			default: false
		}
	},
	data(){
		return {
			isShow: false,
			data: {}
		}
	},
	mounted() {
		this.data = this.content
		this.isShow = this.show		
	},
	watch:{		
		content: function(newval, oldval) {
			if(newval != oldval) this.data = newval	
		},
		show: function(newval, oldval) {
			console.log("oldval", oldval)
			console.log("newval", newval)
			if(newval != oldval) this.isShow = newval
		}
	},
	methods: {
		confirm() {
			this.isShow = false
			this.$emit("confirm")
		}
	}
}
</script>

<style lang="scss">
.prompt_cover {
	position: fixed;
	background-color: rgba(0, 0, 0, .2);
	z-index: 99;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.prompt {
	position: fixed;
	z-index: 100;
	top: 40%;
	left: 15%;
	width: 70%;
	text-align: center;
	padding: 60rpx 30rpx 30rpx;
	background-color: #fff;
	border-radius: 10rpx;
	font-size: 12px;
}
.prompt_title {
	color: #333;
	line-height: 30px;
}
.prompt_content {
	font-size: 20px;
	color: #000;
	line-height: 20px;
	margin: 30rpx 0 60rpx;
}
.prompt_btn {
	border: 1px solid #007AFF;
	background-color: rgba(0, 122, 255, .9);
	color: #ffffff;
	border-radius: 10rpx;
	line-height: 35px;
}
</style>